import React, { Component, Suspense } from 'react';
import { ConfigProvider, ErrorBlock } from 'antd-mobile'
import zhCN from 'antd-mobile/es/locales/zh-CN'

import { Route, Switch, Redirect } from 'react-router-dom'

class RouterView extends Component {
    render() {
        //接收父组件传来的routes( 路由表 )
        var { routes } = this.props;

        //过滤出普通路由
        var normalRoutes = routes.filter((item) => {
            return item.path && item.component;
        })

        //过滤出重定向路由
        var redirectRoutes = routes.filter((item) => {
            return item.from && item.to;
        })

        //过滤出404路由
        var notfoundRoutes = routes.filter((item) => {
            return !item.path && item.component;
        })

        return (
            <Suspense fallback={
                <ConfigProvider locale={zhCN} >
                    <ErrorBlock status='disconnected' />
                </ConfigProvider>
            }>
                <Switch>
                    {/* 动态渲染 普通路由规则 */}
                    {
                        normalRoutes.map((item, index) => {
                            return (
                                /* <Route key={index} path=={item.path} component={item.component}></Route> */
                                <Route key={index} exact={!item.children} path={item.path} render={(props) => {
                                    /* item.component 这个组件是否有子路由 */
                                    if (item.children && item.children.length > 0) {
                                        //{...props} 将props内的所有路由对象继续传到item.component组件内部
                                        //routes 将item.component组件的子路由表传到item.component组件内部
                                        return <item.component {...props} routes={item.children} ></item.component>;
                                    } else {

                                        return <item.component {...props} ></item.component>;
                                    }
                                }}></Route>
                            )
                        })
                    }

                    {/* 动态渲染 重定向路由规则 */}
                    {
                        redirectRoutes.map((item, index) => {
                            return (
                                <Redirect key={index} exact from={item.from} to={item.to}></Redirect>
                            )
                        })
                    }

                    {/* 动态渲染 404路由规则 */}
                    {
                        notfoundRoutes.map((item, index) => {
                            return (
                                <Route key={index} path="*" component={item.component}></Route>
                            )
                        })
                    }

                </Switch>
            </Suspense>
        );
    }
}

export default RouterView;